import React, { useState, useEffect } from 'react'
import { _getRoleList, _deleteRoleList, _patchRoleList } from '../../../../api/role'
import { _getMenuList } from '../../../../api/menu'
import { Table, Button, Modal, notification, Tree } from 'antd'
import { DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import '../right-list/rightlist.css'
const { confirm } = Modal
export default function RoleList () {

  const [dataSource, setDataSource] = useState([])
  const [visible, setVisible] = useState(false)

  const [treeData, setTreeData] = useState([])
  const [checkedKeys, setCheckedKeys] = useState(['0-0-0']);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [currentId, setCurrentId] = useState(-1);
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: "center",
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      align: "center",
    },
    {
      title: '操作',
      align: "center",
      render: (item) => {
        return <div className="func">
          <Button type="primary" danger shape="circle" onClick={() => DeleteRole(item)} icon={<DeleteOutlined />} />
          <Button type="primary" shape="circle" onClick={() => OptionRole(item)} icon={<UnorderedListOutlined />} />
        </div>
      }
    }
  ]
  const DeleteRole = (item) => {
    confirm({
      title: '删除角色列表',
      icon: <ExclamationCircleOutlined />,
      content: '此操作将永久删除当前角色，请确认后执行操作',
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk () {
        _deleteRoleList(item.id).then(res => {
          setDataSource(dataSource.filter((ele) => { return ele.id !== item.id }))
          notification.success({
            message: '删除成功',
            description:
              '当前角色已经从系统中永久删除',
            onClick: () => {
              console.log('Notification Clicked!');
            },
          });
        })
      },
      onCancel () {
        console.log('取消删除操作');
      },
    })
  }
  // 点击配置角色权限列表
  const OptionRole = (item) => {
    // 角色默认的权限列表
    setCheckedKeys(item.rights)
    // 打开modal
    setVisible(true)
    // 存储当前角色的id
    setCurrentId(item.id)
  }
  const handleOk = () => {

    let query = {
      id: currentId,
      data: { rights: checkedKeys.checked }
    }
    console.log(checkedKeys);
    _patchRoleList(query).then(res => {
      setDataSource(dataSource.map((item) => {
        if (item.id === currentId) {
          return { ...item, rights: checkedKeys.checked }
        }
        return item
      }))
    })
    notification.success({
      message: '配置成功',
      description:
        '已为当前角色重新配置权限',
    });

    setVisible(false)
  }
  const handleCancel = () => {
    setVisible(false)
  }
  const onCheck = (checkedKeysValue) => {
    // 已选择的权限列表
    setCheckedKeys(checkedKeysValue);
  };

  useEffect(() => {
    _getRoleList().then(res => {
      setDataSource(res)
    })
  }, [])
  useEffect(() => {
    _getMenuList().then(res => {
      setTreeData(res)
    })
  }, [])

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={item => item.id} scroll={{ y: 700, x: 600 }} pagination={{ pageSize: 10 }}></Table>
      <Modal
        title="角色权限"
        visible={visible}
        onOk={handleOk}
        cancelText="取消"
        okText="确认"
        onCancel={handleCancel}
      >
        <Tree checkable
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          checkStrictly
          height={600}
          selectedKeys={selectedKeys}
          treeData={treeData}></Tree>
      </Modal>
    </div>
  )
}
